<template>
    <!-- 弹窗的渐显过渡 -->
    <transition name="fade">
        <!-- 弹窗 -->
        <cube-popup
            v-show="visible"
            :mask-closable=true
            :z-index=90
            position="bottom"
            type="shop-cart-list"
            @mask-click="maskClick"
        >
            <!-- 列表的上移过渡 -->
            <transition
                name="move"
                @after-leave="onLeave"
            >
                <!-- 购物车列表 -->
                <div v-if="visible">
                    <!-- 头部标签 -->
                    <div class="list-header">
                        <h1 class="title">购物车</h1>
                        <span @click="empty" class="empty">清空</span>
                    </div>
                    <!-- 可滚动列表 -->
                    <cube-scroll class="list-content" ref="scroll">
                        <ul>
                            <li
                                class="food"
                                v-for="food in selectFoods"
                                :key="food.name"
                            >
                                <span class="name">{{food.name}}</span>
                                <span class="price">￥{{food.price * food.countImmediately}}</span>
                                <!-- 选择商品控件 -->
                                <div class="cart-control-wrapper">
                                    <cart-control @add="onAdd" :food="food"></cart-control>
                                </div>
                            </li>
                        </ul>
                    </cube-scroll>
                </div>
            </transition>
        </cube-popup>
    </transition>
</template>

<script>
    import CartControl from 'components/cart-control/cart-control'
    import popupMixin from 'common/mixins/popup'
    import { refreshMixin } from 'common/mixins/scroll'

    // 动画结束事件
    const EVENT_LEAVE = 'leave'
    // 添加商品事件
    const EVENT_ADD = 'add'

    export default {
        mixins: [popupMixin, refreshMixin],
        name: 'shop-cart-list',
        props: {
            selectFoods: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        methods: {
            // 购物车列表动画结束后 触发事件
            onLeave() {
                this.$emit(EVENT_LEAVE)
            },
            // 弹窗蒙层的点击
            maskClick() {
                this.hide()
            },
            // 添加商品事件
            onAdd(target) {
                this.$emit(EVENT_ADD, target)
            },
            empty() {
                // 提示框
                // 不进行缓存，防止其复用其他弹窗
                this.$createDialog({
                    type: 'confirm',
                    title: '清空购物车',
                    content: '您确认要清空购物车吗？',
                    $events: {
                        confirm: () => {
                            this.selectFoods.forEach((food) => {
                                food.countImmediately = 0
                                food.count = 0
                            })
                            this.hide()
                        }
                    }
                }).show()
            }
        },
        components: {
            CartControl
        }
    }

</script>

<style lang="stylus" scoped>
    @import "~common/stylus/variable"

    .cube-shop-cart-list
        // 将列表至于购物车上方
        bottom: 48px
        // 蒙版过渡
        &.fade-enter, &.fade-leave-active
            opacity: 0
        &.fade-enter-active, &.fade-leave-active
            transition: all 0.3s ease-in-out
        // 购物车列表上移过渡
        .move-enter, .move-leave-active
            transform: translate3d(0, 100%, 0)
        .move-enter-active, .move-leave-active
            transition: all 0.3s ease-in-out
        // 购物车头部标题
        .list-header
            height      : 40px
            line-height : 40px
            padding     : 0 18px
            background  : $color-background-ssss
            .title
                float    : left
                font-size: $fontsize-medium
                color    : $color-dark-grey
            .empty
                float    : right
                font-size: $fontsize-small
                color    : $color-blue
        // 购物车内容
        .list-content
            padding   : 0 18px
            max-height: 217px
            overflow  : hidden
            background: $color-white
            .food
                position  : relative
                padding   : 12px 0
                box-sizing: border-box
                .name
                    line-height: 24px
                    font-size  : $fontsize-medium
                    color      : $color-dark-grey
                .price
                    position   : absolute
                    right      : 90px
                    bottom     : 12px
                    line-height: 24px
                    font-weight: 700
                    font-size  : $fontsize-medium
                    color      : $color-red
                // 购物车商品选择控件
                .cart-control-wrapper
                    position: absolute
                    right   : 0
                    bottom  : 6px
</style>
